<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人注册页面</title>
        <!-- 引入favicon图标 -->
        <link rel="shortcut icon"  href=" favicon.ico"/>
        <!-- 引入初始化样式文件 -->
        <link href="css/base.css" rel="stylesheet">
        <!-- 引入公共样式页面 -->
    <link rel="stylesheet" href="css/common.css">
        <!-- 引入注册页面的css -->
        <link rel="stylesheet" href="css/register.css">    
        <style>
            .wrong {
                color: red;
                background-image: url(../shoping/images/wrong.png);
            }
        
            .right {
                color: green;
                background-image: url(../shoping/images/right.png);
            }
        </style>
</head>
<body>
    <!-- 大盒子/版心 -->
    <div class="w">
        <!-- 头部区域 -->
        <header class="header">
            <a href="index.html"><img src="images/pyg.png" alt="品优购注册页面"></a>
        </header>
        <!-- 头部区域结束 -->
        <!-- 主体区域 -->
        <div class="registerarea">
            <!-- 主体头部部分 -->
            <div class="reg_hd">
                <h4>注册新用户</h4>
                <div class="register">我有账号，去<a href="#" class="style_red">登陆</a></div>
            </div>
            <!-- 主体身体部分 -->
            <div class="reg-form">
                <form action="">
                <ul>
                    <li class="telphone">
                       <label for="tel">手机号：</label> <input type="text" class="inp"> <p class="tel">请输入手机号</p>
                    </li>
                    <li>
                        <label for="message">短信验证码：</label> <input type="text" class="inp inp_code"> <p class="code">请输入验证码</p>
                    </li>
                    <li>
                        <label for="password">登录密码：</label> <input type="password" class="inp inp_err"> <p class="error">请输入密码</p>
                     </li>
                     <li class="safe">
                        <!-- 安全程度 &nbsp;<em class="weak">弱</em><em class="better">中</em><em class="best">强</em> -->
                        安全程度 &nbsp;<em class="weak">弱</em><em class="better">中</em><em class="best">强</em>
                     </li>
                     <li>
                        <label for="confirm-password">确认密码：</label> <input type="text" class="inp errYes"> <p class="yes">请再次输入密码</p>
                     </li>
                     <li><div class="gree"><input type="checkbox" name="" id="">同意协议并注册<a href="#">《知晓用户协议》</a></div></li>
                     <li class="sign-up">
                        <input type="submit" value="完成注册" class="btn"></input>
                    </li>
                </ul>
            </form>
            </div>
        </div>
        <!-- 主体区域结束 -->
        <!-- 底部区域 -->
        <footer class="footer">
            <div class="mod_copyright">
                <div class="link">                    
                    <a href="#">关于我们</a>  |  <a href="#">联系我们</a>  |  <a href="#">联系客服</a>  |  <a href="#">商家入驻</a>  |  <a href="#">营销中心</a>  |  <a href="#">手机品优购</a>  |  <a href="#">友情链接</a>  |  <a href="#">销售联盟</a>  |  <a href="#">品优购社区</a>  |  <a href="#">品优购公益</a>  |  <a href="#">English Site</a>  |  <a href="#">Contact U</a>
            </div>
            <div class="copy_right">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:zhanghj+itcast.cn<br>
                京ICP备08001421号京公网安备110108007702
            </div>
        </div>
        </footer>
        <!-- 底部区域结束 -->
    </div>
    <script>
        // 获取元素
        var inp = document.querySelector('.inp')
        var tel = document.querySelector('.tel')
        // 注册事件 失去焦点
        // 手机号
        inp.onblur = function() {
            if(this.value.length !== 11 ) {
                tel.className = 'tel wrong' 
                tel.innerHTML = '输入错误' 
            } else {
                tel.className = 'tel right' 
                tel.innerHTML = '输入正确' 
            }
        }
        // 验证码
        var inp_code = document.querySelector('.inp_code')
        var code = document.querySelector('.code')
        // 注册事件
        inp_code.onblur = function() {
            if(this.value.length !== 5 ) {
                code.className = 'code wrong' 
                code.innerHTML = '验证码错误' 
            } else {
                code.className = 'code right' 
                code.innerHTML = '输入正确' 
            }
        }
        // 密码
        var inp_err = document.querySelector('.inp_err')
        var error = document.querySelector('.error')
        // 注册事件 失去焦点
        inp_err.onblur = function() {
            if(this.value.length < 6 || this.value.length > 16) {
                error.className = 'error wrong' 
                error.innerHTML = '输入错误' 
            }else {
                error.className = 'error right' 
                error.innerHTML = '输入正确' 
            }
        }
        // 确认密码
        var errYes = document.querySelector('.errYes')
        var yes = document.querySelector('.yes')
        errYes.onblur = function() {
            if(this.value !== inp_err.value) {
                yes.className = 'yes wrong' 
                yes.innerHTML = '密码错误' 
            } else {
                yes.className = 'yes right' 
                yes.innerHTML = '输入正确' 
            }
        }
    </script>
</body>
</html>